<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- <script src="js/request.js"></script> -->

    <style>
        body {
            padding: 0px;
            margin: 0px;
        }

        .active {
            color: #7fb80e;
        }

        audio {
            width: 90%;
            margin-left: 5%;
            position: absolute;
            bottom: 10px;
        }

        #music_list {
            width: 85%;
            padding-bottom: 10px;
            height: 95%;
            overflow: scroll
        }


        li {
            padding-top: 25px;
            word-wrap: break-word;
        }
    </style>
</head>
<!-- 用于播放windows本地服务上的音乐 -->

<body bgcolor="#FFFFFF" style="height:90%">
    <ol id="music_list"></ol>


    <audio preload="auto" height="100px" controls id="audio_view" preload="auto"></audio>

    <!-- TODO 设置自定义播放器，添加播放模式 -->
    <script>
        const proto = location.origin.indexOf("https") == 0 ? "https://" : "http://"

        const audioView = document.querySelector("#audio_view");
        const musicListView = document.querySelector("#music_list");
        let musicList = [];

        let currentPosition = 0;

        function play(e) {
            playCurrent(e.dataset.position)
        }


        function parseResult(result) {
            let json;
            if (typeof result === 'string') {
                json = JSON.parse(result);
            } else {
                json = result;
            }
            // const json = JSON.parse(result);
            musicList = json;
            musicList.sort(function (a, b) {
                if (a.indexOf("-") > 0) {
                    a = a.split("-")[1].trim()
                } else {
                    a = a.substring(a.lastIndexOf("/") + 1)
                }
                if (b.indexOf("-") > 0) {
                    b = b.split("-")[1].trim()
                } else {
                    b = b.substring(b.lastIndexOf("/") + 1)
                }
                return a.localeCompare(b, undefined, { sensitivity: 'base' });
            });


            let string = "";
            var path = "";
            for (let i = 0; i < json.length; ++i) {
                path = json[i]
                // console.log(path)
                string += "<li src=\"" + json[i];
                string += "\" onclick=\"play(this)\" data-position=" + i + ">" + json[i].substring(path.lastIndexOf("/") + 1) + "<\/li>";
            }
            musicListView.innerHTML = string;


            audioView.src = musicList[0];
            musicListView.childNodes[0].classList.add("active")
        }


        function playCurrent(position) {
            if (currentPosition === position) {
                return
            }

            audioView.src = musicList[position];


            musicListView.childNodes[currentPosition].classList.remove("active");
            currentPosition = parseInt(position);
            musicListView.childNodes[currentPosition].classList.add("active");
        }

        function playNext() {
            if (musicList.length <= (currentPosition + 1)) {
                playCurrent(0)
            } else
                playCurrent(currentPosition + 1)
        }

        audioView.onended = function () {
            playNext();
        }
    </script>

    <script type="text/javascript" src="./getrequest.js"></script>
    <script type="text/javascript">
        getRequest(proto + location.host
            + "/getMusics", "", function (res) {
                // console.log(JSON.parse(res))
                parseResult(JSON.parse(res))
            })
        // parseResult(["https://divaid.github.io/resources/musices/%E8%A2%AB%E9%81%97%E5%BC%83%E7%9A%84%E5%9C%9F%E8%B1%86-%E5%90%B9%E7%AE%AB%E4%BA%BA%E5%8E%BB%E7%8E%89%E6%A5%BC%E7%A9%BA.wav", "https://divaid.github.io/resources/musices/ThePianoGuys-LoveStory.mp3", "https://divaid.github.io/resources/musices/Hea2t-盛夏与蝉鸣.mp3"])
    </script>
</body>

</html>